<template>
  <div>
    <div id="main" style="width: 600px; height: 800px;border:1px solid #000"></div>
  </div>
</template>

<script>
import * as echarts from "echarts";
import "echarts-gl";
import axios from "axios";
import $ from "jquery"
export default {
  mounted() {
    this.ect3D();
  },
  methods: {
    ect3D() {
      var ROOT_PATH =
        "https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/examples";
      var chartDom = document.getElementById("main");
      var myChart = echarts.init(chartDom);
      var option;
      axios.get(
        ROOT_PATH + "/data/asset/data/life-expectancy-table.json",
        function (data) {
          var symbolSize = 2.5;
          option = {
            grid3D: {},
            xAxis3D: {
              type: "category",
            },
            yAxis3D: {},
            zAxis3D: {},
            dataset: {
              dimensions: [
                "Income",
                "Life Expectancy",
                "Population",
                "Country",
                { name: "Year", type: "ordinal" },
              ],
              source: data,
            },
            series: [
              {
                type: "scatter3D",
                symbolSize: symbolSize,
                encode: {
                  x: "Country",
                  y: "Life Expectancy",
                  z: "Income",
                  tooltip: [0, 1, 2, 3, 4],
                },
              },
            ],
          };
          option && myChart.setOption(option);
        }
      );

    //   option && myChart.setOption(option);
    },
  },
};
</script>

<style>
</style>